.header {
  background: $header-background;
  a {
    font-weight: map-get($base, font-weight);
    text-decoration: none !important;
    @include link-colors($header-text-color, $main-color-1);
  }
  & > .main > .logo {
    float: left;
    @include menu(3, 0);
    @include align-items(center);
    height: map-get($layout, header-height);
    & > svg {
      margin-right: .8rem;
      vertical-align: middle;
      width: map-get($base, font-size-h4) * 1.6;
      height: map-get($base, font-size-h4) * 1.6;
      @include media-breakpoint-down(md) {
        margin-right: .5rem;
        width: map-get($base, font-size-h4) * 1.2;
        height: map-get($base, font-size-h4) * 1.2;
      }
    }
    & > a {
      display: inline-block;
      font-size: map-get($base, font-size-h4);
      @include media-breakpoint-down(md) {
        font-size: map-get($base, font-size-h4-small);
      }
    }
    @include media-breakpoint-down(md) {
      float: none;
      height: map-get($layout, header-height-sm);
    }
  }
  & > .main > nav {
    display: block;
    float: right;
    white-space: nowrap;
    @include overflow(auto);
    ul {
      margin: 0;
      @include menu(3, 2, nowrap);
      @include align-items(center);
      height: map-get($layout, header-height);
      @include media-breakpoint-down(md) {
        height: auto;
      }
      & > li {
        @include split-line(bottom, 4px, transparent);
        &.active {
          @include split-line(bottom, 4px, $main-color-1);
          a {
            @include link-colors($main-color-1, $main-color-1);
          }
        }
      }
    }
    @include media-breakpoint-down(md) {
      float: none;
    }
  }
}